<template>
  <div class="fullscreen-background">
    <!-- 您的页面内容 -->
    <div class="LoginPopup" v-show="isLoginPopup">
      <p class="bindUserLogin">登录</p>
      <p class="login-prompt">请点击账户登录</p>
      <div class="userList">
        <div
          @click="onUserLogin(index)"
          class="userSelection"
          v-for="(item, index) in bindingLogin"
          :key="index"
        >
          <div>用户名称: {{ item.userName }}</div>
          <div style="margin-top: 10px">手机号: {{ item.mobilePhone }}</div>
        </div>
      </div>
      <div class="return-to-login" @click="onReturnToLogin()">返回登录</div>
    </div>
    <div class="logbox" v-show="!isLoginPopup">
      <h3 style="margin-top: 50px">欢迎使用云报修系统</h3>
      <div style="margin-top: 30px">
        <el-button
          :class="{ active: activeButton === 'button1' }"
          @click="setActive('button1')"
          ><img
            style="width: 20px; height: 20px; margin-right: 10px"
            :src="currentImageSrc"
            alt=""
          />账号密码登陆</el-button
        ><el-button
          @click="setActive('button2')"
          :class="{ active: activeButton === 'button2' }"
          ><img
            :src="currentImageSrc1"
            alt=""
            style="width: 20px; height: 20px; margin-right: 10px"
          />扫码登陆</el-button
        >
      </div>
      <div v-show="activeButton == 'button1'">
        <el-form :model="form" label-width="auto" style="max-width: 200px">
          <el-form-item>
            <el-input
              style="margin-top: 10px"
              placeholder="请输入手机号"
              v-model="loginform.mobilePhone"
            />
          </el-form-item>
          <el-form-item>
            <el-input placeholder="请输入密码" v-model="loginform.password" />
          </el-form-item>
        </el-form>
        <el-button style="width: 200px" @click="userLogin()"
          >立即登陆</el-button
        >
      </div>
      <div v-show="activeButton == 'button2'" class="wechat">
        <div @click="onwechat" style="width: 178px; height: 178px">
          <div v-if="hide.value" class="loader"></div>
          <img v-else class="wechat-img" :src="codelogin.code" />
          <div class="wechat-tips">
            <div class="center-top">
              <p>打开</p>
              <p>微信</p>
              <p>扫码登陆</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue'
import {
  login,
  register,
  getCode,
  verifyCode,
  getLoginQRImage,
  forgetPassWordCode,
  getUserQRImage,
  checkBindCode,
  checkLoginCode,
  loginUser,
  updateUserLoinTime
} from '@/api/user.js'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'
const router = useRouter()

let codelogin = ref({
  //二维码登陆图片的地址
  code: ''
})
let flag = ref(true)
const userLogin = async () => {
  const res = await login(loginform)
  console.log(res)
  if (res.msg == '无该用户') {
    ElMessage({
      message: '用户不存在，请检查手机号',
      type: 'error'
    })
    return
  }
  if (res.msg == '密码错误') {
    ElMessage({
      message: '密码错误，请检查密码',
      type: 'error'
    })
    return
  }
  if (res.code == '200') {
    ElMessage({
      message: '登陆成功，即将跳转首页',
      type: 'success',
      duration: '2000'
    })
    setTimeout(() => {
      router.push('/')
    }, 2000)
  }
}

// 定义登陆表单信息
const loginform = reactive({
  mobilePhone: '',
  password: ''
})
const userStore = useUserStore()
const activeButton = ref() //定义按钮激活状态
const currentImageSrc = ref() //定义点击账号密码登陆图片路径
const currentImageSrc1 = ref() //定义点击二维码登陆图片路径
let isLoginPage = ref(true)
let hide = ref(true) //应该是定义控制二维码是否渲染
let bindingLogin = ref()
let isLoginPopup = ref(false)

onMounted(() => {
  setActive('button1')
})
//  imageUrl = new URL('@/assets/image/二维码.png', import.meta.url);
const setActive = async (button) => {
  activeButton.value = button
  if (button == 'button1') {
    currentImageSrc.value = new URL(
      '@/assets/image/computer.png',
      import.meta.url
    )
    currentImageSrc1.value = new URL(
      '@/assets/image/unQR-code.png',
      import.meta.url
    )
  } else {
    currentImageSrc.value = new URL(
      '@/assets/image/uncomputer.png',
      import.meta.url
    )
    currentImageSrc1.value = new URL(
      '@/assets/image/QR-code.png',
      import.meta.url
    )
    const res3 = await getLoginQRImage()
    if (res3.code === 9000) {
      codelogin.value.code = res3.dataList.url
      hide.value = 'false'
      const checkLoginId = setInterval(async () => {
        const res7 = await checkLoginCode({
          statusId: res3.dataList.statusId
        })
        console.log(res7)
        if (res7.code === 9000) {
          clearInterval(checkLoginId)
          isLoginPage.value = false
          if (res7.list && res7.list.length > 0) {
            bindingLogin.value = res7.list
            isLoginPopup.value = true
            console.log(isLoginPopup.value)
          } else {
            await updateUserLoinTime({ id: res7.msg.userEntity.id })
            await userStore.getUserInfo(res7.msg.userEntity, res7.msg.token)
            router.push({ path: '/' })
            setLoginStatus()
            ElMessage({
              message: '登陆成功',
              type: 'success'
            })
          }
        }
        if (flag.value) {
          clearInterval(checkLoginId)
        }
      }, 5000)
    } else {
      hide.value = true
    }
  }
}
const onUserLogin = async (index) => {
  //二维码登陆
  const res8 = await loginUser({
    id: bindingLogin.value[index].id
  })
  if (res8.code == 200) {
    await updateUserLoinTime({ id: res8.msg.userEntity.id })
    await userStore.getUserInfo(res8.msg.userEntity, res8.msg.token)
    router.push({ path: '/' })
    setLoginStatus()
  }
}
const setLoginStatus = () => {
  sessionStorage.setItem('isLoggedIn', true) //设置登陆状态
}
// console.log(res7)
</script>

<style scoped lang="less">
.logbox {
  display: flex;
  align-items: center;
  //   justify-content: center;
  //不使用垂直居中
  flex-direction: column;
  background-color: white;
  width: 700px;
  border-radius: 15px;
  height: 700px;
  margin-top: 200px;
  margin-left: 600px;
}
.fullscreen-background {
  display: flex;
  //   width: 100%;
  height: 100vh;
  background-image: url('@/assets/bgc.png');
  background-size: cover;
  background-position: center;
  //   background-repeat: no-repeat;
  z-index: 1;
}
.active {
  color: blue;
}
.wechat {
  // margin-top: 48px;
  // margin-bottom: 24px;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  .wechat-img {
    width: 178px;
    height: 178px;
    // background-color: #d9d9d9;
  }
  .wechat-tips {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .center-top {
      display: flex;
      align-items: center;
      p {
        font-size: 14px;
        font-weight: Normal;
        text-align: center;
        color: rgba(0, 0, 0, 0.65);
      }
      > p:last-of-type {
        color: #3a90fd;
      }
    }
    .center-text {
      margin-top: 3px;
      font-size: 14px;
      font-weight: Normal;
      text-align: center;
      color: rgba(0, 0, 0, 0.65);
    }
  }
}
.LoginPopup {
  width: 700px;
  background-color: #fff;
  margin-left: 600px;
  margin-top: 200px;
  height: 700px;
  .bindUserLogin {
    font-size: 30px;
    margin-top: 50px;
    text-align: center;
    padding-bottom: 20px;
  }
  .login-prompt {
    text-align: center;
    margin-bottom: 30px;
    color: crimson;
  }
  .userList {
    overflow: auto;
    height: 320px;
    width: 85%;
    margin: auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    .userSelection {
      border-bottom: 1px solid #ccc;
      padding-top: 10px;
      padding-bottom: 10px;
      width: 100%;
      text-align: center;
    }
    .userSelection:hover {
      background: #0969d7;
      color: #fff;
      cursor: pointer;
    }
  }
  .return-to-login {
    margin-top: 40px;
    color: #377cf7;
    margin-left: 40px;
  }
}
.userTitle {
  font-size: 30px;
  font-weight: bolder;
  text-align: center;
  margin-top: 30px;
}
.promptTitle {
  margin-top: 30px;
  text-align: center;
}
.return-login {
  margin-top: 25px;
  color: #377cf7;
  margin-left: 90px;
}
.bindUsers {
  width: 178px;
  height: 178px;
}
</style>
